<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Kenya TimeMap</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAMx1phLFF1wkmIQ5MDXxq3BRVO_DvwaovX9kda3LaxUWzpTu0hxQ283dZA9G82WvL8jx8qgeEOL9TvA"
      type="text/javascript"></script>
    <script type="text/javascript" src="http://simile.mit.edu/timeline/api/timeline-api.js"></script>
    <script src="../timemap.js" type="text/javascript"></script>
	<script type="text/javascript">

function onLoad() {
    TimeMap.init({
        mapId: "map",               // Id of map div element (required)
        timelineId: "timeline",     // Id of timeline div element (required) 
        datasets: [
            {
                title: "Violence in Kenya",
                theme: TimeMapDataset.redTheme({eventIconPath: '../images/'}),
                data: {
                    type: "kml",     // Data to be loaded in KML - must be a local URL
                    url: "kenya.kml" // KML file to load
                }
            }
        ],
        bandInfo: [
            {
               width:          "85%", 
               intervalUnit:   Timeline.DateTime.DAY, 
		       intervalPixels: 210
            },
            {
               width:          "15%", 
               intervalUnit:   Timeline.DateTime.WEEK, 
		       intervalPixels: 150,
               showEventText:  false,
               trackHeight:    0.2,
               trackGap:       0.2
            }
        ]
    });
}
    </script>
	<link href="examples.css" type="text/css" rel="stylesheet"/>
    <style>
    div#timelinecontainer{ height: 310px; }
    div#mapcontainer{ height: 300px; }
    </style>
  </head>

  <body onload="onLoad();" onunload="GUnload();">
    <div id="help">
    <h1>KML Dataset</h1>
    In this example, we're loading a KML file of reports of violence in Kenya (data courtesy <a href="http://www.ushahidi.com">www.ushahidi.com</a>). The bandInfo setting allows us to set a custom layout the timeline, and we've resized the timeline and map with CSS. (Note that IE will throw an error if if you're viewing this locally, due to cross-site scripting restrictions.)
    </div>
    <div id="timemap">
        <div id="timelinecontainer">
          <div id="timeline"></div>
        </div>
        <div id="mapcontainer">
          <div id="map"></div>
        </div>
    </div>
  </body>
</html>
